<!-- 登录页面:  yjj -->

<!DOCTYPE html>
<!-- saved from url=(0067)https://www.17sucai.com/preview/1339618/2019-08-23/login/login.html -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" href="./登录_files/index.css">
    <style>
    #checkphone{
    float:right;
    width:150px;
    color:red;
    text-align: center;
    margin-top:5px;
    }
    #checkpwd{
     color:red;
     float:right;
     text-align: center;
    }
    .img{
    width:30px;
    height:30px;
    float:right;
    margin-right:40px;
    margin-top: 0px;
    }
    #forget{
    margin-top:0px;
    margin-right:30px;
    height:24px;
    width:200px;
    float:right;
    }
    #bigbox{
    margin-top:0px;
    }
    #logo{
     margin-top:0px;
    }
    #forg:hover{
    color:white;
    }
    </style>
</head>
<body class="login-bg">
    <div class="login-contain">
        <div class="login-header">
            <p>欢迎登录</p>
        </div>
        <div id="logo" class="login-logo" align="center">
            <img src="登录_files/YOGAlogo.png" alt="">
        </div>
        <div id="bigbox" class="form-group">
            <div class="form-item">
                <label for="phone">
                    <img src="./登录_files/phone.png" alt="">
                </label>
                <input id="phone" type="text" placeholder="请输入手机号">
                <div id="checkphone"></div>
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="./注册_files/key.png" alt="">
                </label>
                <input id="code" type="text" placeholder="请输入密码">
				<!-- <input type="submit" value="发送验证码"/> -->
				<div id="checkpwd"></div>
            </div>
        </div>
        <div id="forget" class="copyright">
        <a id="forg" href="/chat/forget" color="ghostwhite">
                       修改密码？/ 忘记密码？
        </a>
        </div>
        <div class="button-group">
            <button id="subm" type="submit" class="login-btn">登录</button>
			<a href="/chat/loadregister"><button class="login-register">注册</button></a>
        </div>
        <div class="casual">
            <a href="/chat/main">随便逛逛/已登入？</a>
        </div>
        <div class="order-login">
            <p>使用第三方账号登录</p>
            <ul>
                <li>
                    <a href="https://www.17sucai.com/preview/1339618/2019-08-23/login/login.html#">
                        <img src="./登录_files/QQ.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="https://www.17sucai.com/preview/1339618/2019-08-23/login/login.html#">
                        <img src="./登录_files/WeChat.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="https://www.17sucai.com/preview/1339618/2019-08-23/login/login.html#">
                        <img src="./注册_files/new.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="copyright">
            该技术由如你所喜欢提供
        </div>
    </div>
</body>
<script src="/chat/js/jquery.min.js"></script>
<script type="text/javascript">
var isok=false;
$("#phone").blur(function(){
	var number = $("#phone").val();
	if(number == ""){
		$("#checkphone").empty();
		$("#checkphone").append("手机号不能为空");
		isok=false;
		}else{
		$("#checkphone").empty();
	}
	if(/^[0-9][1-9]{10}$/.test(number) == false){	//使用正则表达式
		$("#checkphone").empty();
		$("#checkphone").append("手机号的格式不对");
		isok=false;
		}else{
			$("#checkphone").empty();
			$("#checkphone").append("<img src='./注册_files/yes.png' class='img'>");
			isok=true;
		}
	});
var str=""//存储表单真实密码
    $("#code").keyup(function(){
       value=$(this).val()//获取表单密码
       if(value.length>=str.length){//当密码长度增加时由于前面的已经变成星号，所以截取后面输入的字符追加到str中
          str+=value.substr(str.length,value.length-str.length)    
       }
       else{//当密码长度减小时，判断减小后的长度，然后从真实密码中截取
         str=str.substr(0,value.length)
       }           
        $(this).val(value.replace(/./g,"*"))//变星星喽
    })
$("#subm").click(function(){
           if(isok){
        	   var phone=$("#phone").val();
        	   $("#checkphone").load("/chat/login",{phone:phone,pwd:str},function(data){
        		   $("#checkphone").empty();
        		   if(data=="hello"){
        			  // alert("登入成功！");
        			    location.href="/chat/main"; 
        		   }else{
        			   alert("登入失败！");
        		   }
        	   })   
           }else{
        	   alert("账号有误，请认真填写手机号");
           }
       })
</script>
</html>